<template>
  <view>
    <view :style="{height: statusBarHeight + 'px'}" style="position: fixed;top: 0;width: 100%;"></view>
    <view :style="{top: statusBarHeight + 'px'}"
          style="position: fixed;width: 100%;height: 44px;background-color: #fff;z-index: 9999;display: flex;align-items: center;justify-content: center;">
      <u-tabs @click='changetabs' :current="actTab" :list="tabsList" lineWidth="40" lineColor="#f56c6c"
              :activeStyle="{
				            color: '#16160e',
							fontSize: '35rpx',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
							fontSize: '32rpx',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 20px; padding-right: 20px; height: 40px;">
      </u-tabs>
      <view style="position: absolute;right: 30rpx;">
        <u-icon @click="goToSearch" name="search" color="#16160e" size="29"></u-icon>
      </view>
    </view>
    <view :style="{height: statusBarHeight+40+ 'px'}" style="width: 100%;background-color:antiquewhite;"></view>
    <swiper @change="swipeIndex" :current="actTab" :duration="300" previous-margin="0" @touchmove.stop;
            :style="{height: notesHeight + 'px'}" @transition="transition" @animationfinish="animationFinish">
      <swiper-item>
        <scroll-view scroll-y :style="{height: notesHeight + 'px'}" @scrolltolower="onReach"
                     :refresher-enabled="enablerefresh" @refresherrefresh="onRefresh" :refresher-triggered="refreshing"
                     :refresher-threshold="100">
          <view :id="'component' + actTab">
            <view v-for="(item,index) in notesList[0].notesList" :key="index"
                  style="border-bottom-style: solid;border-bottom-width: 1rpx;border-bottom-color: #f3f3f2;padding-bottom: 40rpx;">
              <view style="display: flex;padding: 20rpx 40rpx;align-items: center;">
                <image :src="item.avatarUrl" style="width: 80rpx;height: 80rpx;border-radius: 50%;"
                       @click="goToUser(item.belongUserId)">
                </image>
                <view style="margin-left: 10rpx;">
                  <view style="font-size: 32rpx;color: #2b2b2b;">{{ item.nickname }}</view>
                </view>
                <view style="margin:0 10rpx;font-size: 26rpx;color: #afafb0;">·</view>
                <view v-if="item.createTime!=item.updateTime" style="font-size: 26rpx;color: #afafb0;">
                  更新于
                </view>
                <view style="font-size: 26rpx;color: #afafb0;">{{ item.updateTime }}</view>
                <u-icon style="margin-left: auto;" name="more-dot-fill" size="25"></u-icon>
              </view>
              <view @click="goToDetail(item.id,item.notesType)"
                    style="width: 750rpx;height: auto;background-color: #ffffff;justify-content: center;display: flex;">
                <u--image :height="item.height+'rpx'" :width="item.width+'rpx'" :src="item.coverPicture"
                          :fade="false" lazyLoad mode="aspectFill" :duration="300">
                  <template v-slot:loading>
                    <view style="height: 200rpx;text-align: center;padding: 20rpx;">
                      <u-loading-icon color="#e83929"></u-loading-icon>
                      <view style="font-size: 30rpx;">loading......</view>
                    </view>
                  </template>
                </u--image>
              </view>
              <view style="padding: 20rpx;display: flex;">
                <view style="margin-left: auto;margin-right: 20rpx;display: flex;align-items: center;">
                  <u-transition :show="!item.isLike" mode="fade" duration="2000">
                    <u-icon v-if="!item.isLike" name="/static/praise.png" size="28"
                            @click="praiseUserNotes(item.id,item.belongUserId,index)"></u-icon>
                  </u-transition>
                  <u-transition :show="item.isLike" mode="fade" duration="2000">
                    <u-icon v-if="item.isLike" name="/static/praise_select.png" size="28"
                            @click="praiseUserNotes(item.id,item.belongUserId,index)"></u-icon>
                  </u-transition>
                  <view v-if="item.notesLikeNum>0"
                        style="color: #2b2b2b;font-size: 30rpx;margin-left: 10rpx;text-align: center;">
                    {{ item.notesLikeNum }}
                  </view>
                  <view style="width: 20rpx;"></view>
                  <u-transition :show="item.isCollect" mode="fade" duration="2000">
                    <u-icon v-if="item.isCollect" name="/static/collect_select.png"
                            @click="collectNotes(item.id,item.belongUserId,index)" size="28"></u-icon>
                  </u-transition>
                  <u-transition :show="!item.isCollect" mode="fade" duration="2000">
                    <u-icon v-if="!item.isCollect" name="/static/collect.png" size="28"
                            @click="collectNotes(item.id,item.belongUserId,index)"></u-icon>
                  </u-transition>
                  <view v-if="item.notesCollectNum>0"
                        style="color: #2b2b2b;font-size: 30rpx;margin-left: 10rpx;text-align: center;">
                    {{ item.notesCollectNum }}
                  </view>
                </view>
              </view>
              <view @click="goToDetail(item.id,item.notesType)">
                <rich-text :nodes="item.content"
                           style="padding: 0 40rpx;color: #595857;font-size: 35rpx;-webkit-line-clamp: 1;"
                           class="title"></rich-text>
              </view>
            </view>
            <u-loadmore margin-top="20" line :status="notesList[0].status" :loading-text="loadingText"
                        :loadmore-text="loadmoreText" :nomore-text="nomoreText"/>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <!-- <view style="width: 100%;height: 40px;background-color: #fffz;z-index: 9999;">
          <u-tabs @click='changeType' :current="typeTabIndex" :list="findList" lineWidth="0"
            lineColor="#f56c6c" :activeStyle="{
                    color: '#16160e',
              fontSize: '32rpx',
                    transform: 'scale(1.05)'
                }" :inactiveStyle="{
                    color: '#606266',
              fontSize: '30rpx',
                    transform: 'scale(1)'
                }" itemStyle="padding-left: 10px; padding-right: 10px; height: 40px;"
            style="padding-left: 20rpx;padding-right: 20rpx;">
            <view slot="right" @tap="$u.toast('插槽被点击')" style="padding-left: 5rpx;">
              <u-icon name="list" size="24" bold></u-icon>
            </view>
          </u-tabs>
        </view> -->
        <scroll-view scroll-y :style="{height: notesHeight + 'px'}" @scrolltolower="onReach"
                     :refresher-enabled="enablerefresh" @refresherrefresh="onRefresh" :refresher-triggered="refreshing"
                     :refresher-threshold="100">
          <view :id="'component' + actTab">
            <view style="width: 100%;display: flex;flex-wrap: wrap;">
              <view class="water-left">
                <block v-for="(item,index) in notesList[1].leftList" :key="index">
                  <view style="position: relative;" @click="goToDetail(item.id,item.notesType)">
                    <u-image radius="20rpx" :src="item.coverPicture" :fade="false" lazyLoad width="100%"
                             height="auto" mode="widthFix"
                             style="max-height: 500rpx;overflow: hidden;border-radius: 20rpx;">
                      <template v-slot:loading>
                        <view style="height: 200rpx;text-align: center;padding: 20rpx;">
                          <u-loading-icon color="#e83929"></u-loading-icon>
                          <view style="font-size: 30rpx;">loading......</view>
                        </view>
                      </template>
                    </u-image>
                    <view class="look-views" v-if="item.views!=null">
                      <u-icon name="eye" color="#ffffff" size="25rpx"></u-icon>
                      <view style="margin-left: 5rpx;">{{ item.views }}</view>
                    </view>
                    <view v-if="item.notesType==1" class="video-play">
                      <u-icon v-if="item.notesType==1" name="play-right-fill" color="#ffffff"
                              size="25rpx"></u-icon>
                    </view>
                  </view>
                  <view class="title" @click="goToDetail(item.id,item.notesType)">{{ item.title }}
                  </view>
                  <view style="display: flex;position: relative;padding: 20rpx;">
                    <image style="height: 20px;width: 20px;border-radius: 50%;" mode="aspectFill"
                           @click="goToUser(item.belongUserId)" :src="item.avatarUrl">
                    </image>
                    <view class="note-username">
                      {{ item.nickname }}
                    </view>
                    <view style="display: flex;position: absolute;right: 10rpx;">
                      <u-transition :show="!item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="!item.isLike" name="/static/praise.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,1,index)"></u-icon>
                      </u-transition>
                      <u-transition :show="item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="item.isLike" name="/static/praise_select.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,1,index)"></u-icon>
                      </u-transition>
                      <view v-if="item.notesLikeNum>0"
                            style="color: gray;font-size: 15px;line-height: 18px;margin-left: 3rpx;">
                        {{ item.notesLikeNum }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
              <view class="water-right">
                <block v-for="(item,index) in notesList[1].rightList" :key="index">
                  <view style="position: relative;" @click="goToDetail(item.id,item.notesType)">
                    <u-image radius="20rpx" :src="item.coverPicture" width="100%" height="auto" mode="widthFix"
                             :fade="false" lazyLoad
                             style="max-height: 500rpx;overflow: hidden;border-radius: 20rpx;">
                      <template v-slot:loading>
                        <view
                            style="height: 200rpx;text-align: center;padding: 20rpx;margin-bottom: 30rpx;">
                          <u-loading-icon color="#e83929"></u-loading-icon>
                          <view style="font-size: 30rpx;">loading......</view>
                        </view>
                      </template>
                    </u-image>
                    <view class="look-views" v-if="item.views!=null">
                      <u-icon name="eye" color="#ffffff" size="25rpx"></u-icon>
                      <view style="margin-left: 5rpx;">{{ item.views }}</view>
                    </view>
                    <view v-if="item.notesType==1" class="video-play">
                      <u-icon name="play-right-fill" color="#ffffff" size="25rpx"></u-icon>
                    </view>
                  </view>
                  <view class="title" @click="goToDetail(item.id,item.notesType)">{{ item.title }}
                  </view>
                  <view style="display: flex;position: relative;padding: 20rpx;">
                    <image style="height: 20px;width: 20px;border-radius: 50%;" mode="aspectFill"
                           @click="goToUser(item.belongUserId)" :src="item.avatarUrl">
                    </image>
                    <view class="note-username">
                      {{ item.nickname }}
                    </view>
                    <view style="display: flex;position: absolute;right: 10rpx;">
                      <u-transition :show="!item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="!item.isLike" name="/static/praise.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,2,index)"></u-icon>
                      </u-transition>
                      <u-transition :show="item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="item.isLike" name="/static/praise_select.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,2,index)"></u-icon>
                      </u-transition>
                      <view v-if="item.notesLikeNum>0"
                            style="color: gray;font-size: 15px;line-height: 18px;margin-left: 3rpx;">
                        {{ item.notesLikeNum }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
            </view>
            <u-loadmore margin-top="20" line :status="notesList[1].status" :loading-text="loadingText"
                        :loadmore-text="loadmoreText" :nomore-text="nomoreText"/>
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y :style="{height: notesHeight + 'px'}" @scrolltolower="onReach"
                     :refresher-enabled="enablerefresh" @refresherrefresh="onRefresh" :refresher-triggered="refreshing"
                     :refresher-threshold="100">
          <view :id="'component' + actTab">
            <view style="width: 100%;display: flex;flex-wrap: wrap;">
              <view class="water-left">
                <block v-for="(item,index) in notesList[2].leftList" :key="index">
                  <view style="position: relative;" @click="goToDetail(item.id,item.notesType)">
                    <u--image :src="item.coverPicture" width="100%" height="auto" mode="widthFix"
                              :fade="false" lazyLoad
                              style="max-height: 500rpx;overflow: hidden;border-radius: 20rpx;">
                      <template v-slot:loading>
                        <view style="height: 200rpx;text-align: center;padding: 20rpx;">
                          <u-loading-icon color="#e83929"></u-loading-icon>
                          <view style="font-size: 30rpx;">loading......</view>
                        </view>
                      </template>
                    </u--image>
                    <view class="look-views" v-if="item.views!=null">
                      <u-icon name="eye" color="#ffffff" size="25rpx"></u-icon>
                      <view style="margin-left: 5rpx;">{{ item.views }}</view>
                    </view>
                    <view v-if="item.notesType==1" class="video-play">
                      <u-icon name="play-right-fill" color="#ffffff" size="25rpx"></u-icon>
                    </view>
                  </view>
                  <view class="title" @click="goToDetail(item.id,item.notesType)">{{ item.title }}
                  </view>
                  <view style="display: flex;position: relative;padding: 20rpx;">
                    <image style="height: 20px;width: 20px;border-radius: 50%;" mode="aspectFill"
                           @click="goToUser(item.belongUserId)" :src="item.avatarUrl">
                    </image>
                    <view class="note-username">
                      {{ item.nickname }}
                    </view>
                    <view style="display: flex;position: absolute;right: 10rpx;">
                      <u-transition :show="!item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="!item.isLike" name="/static/praise.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,1,index)"></u-icon>
                      </u-transition>
                      <u-transition :show="item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="item.isLike" name="/static/praise_select.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,1,index)"></u-icon>
                      </u-transition>
                      <view v-if="item.notesLikeNum>0"
                            style="color: gray;font-size: 15px;line-height: 18px;margin-left: 3rpx;">
                        {{ item.notesLikeNum }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
              <view class="water-right">
                <block v-for="(item,index) in notesList[2].rightList" :key="index">
                  <view style="position: relative;" @click="goToDetail(item.id,item.notesType)">
                    <u--image :src="item.coverPicture" width="100%" height="auto" mode="widthFix"
                              :fade="false" lazyLoad
                              style="max-height: 500rpx;overflow: hidden;border-radius: 20rpx;">
                      <template v-slot:loading>
                        <view
                            style="height: 200rpx;text-align: center;padding: 20rpx;margin-bottom: 30rpx;">
                          <u-loading-icon color="#e83929"></u-loading-icon>
                          <view style="font-size: 30rpx;">loading......</view>
                        </view>
                      </template>
                    </u--image>
                    <view class="look-views" v-if="item.views!=null">
                      <u-icon name="eye" color="#ffffff" size="25rpx"></u-icon>
                      <view style="margin-left: 5rpx;">{{ item.views }}</view>
                    </view>
                    <view v-if="item.notesType==1" class="video-play">
                      <u-icon name="play-right-fill" color="#ffffff" size="25rpx"></u-icon>
                    </view>
                  </view>
                  <view class="title" @click="goToDetail(item.id,item.notesType)">{{ item.title }}
                  </view>
                  <view style="display: flex;position: relative;padding: 20rpx;">
                    <image style="height: 20px;width: 20px;border-radius: 50%;" mode="aspectFill"
                           @click="goToUser(item.belongUserId)" :src="item.avatarUrl">
                    </image>
                    <view class="note-username">
                      {{ item.nickname }}
                    </view>
                    <view style="display: flex;position: absolute;right: 10rpx;">
                      <u-transition :show="!item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="!item.isLike" name="/static/praise.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,2,index)"></u-icon>
                      </u-transition>
                      <u-transition :show="item.isLike" mode="fade" duration="2000">
                        <u-icon v-if="item.isLike" name="/static/praise_select.png" size="18"
                                @click="praiseNotes(item.id,item.belongUserId,2,index)"></u-icon>
                      </u-transition>
                      <view v-if="item.notesLikeNum>0"
                            style="color: gray;font-size: 15px;line-height: 18px;margin-left: 3rpx;">
                        {{ item.notesLikeNum }}
                      </view>
                    </view>
                  </view>
                </block>
              </view>
            </view>
            <u-loadmore margin-top="20" line :status="notesList[2].status" :loading-text="loadingText"
                        :loadmore-text="loadmoreText" :nomore-text="nomoreText"/>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>


  </view>
</template>

<script>
import {
  getLastNotesByPage
} from '@/apis/notes_service.js'
import {
  pxToRpx
} from '@/utils/util.js'

export default {

  data() {
    return {
      statusBarHeight: 0,
      notesHeight: 0,
      actTab: 1,
      tabsList: [{
        name: '关注',
      }, {
        name: '发现',
      }, {
        name: '附近',
      }],
      findList: [{
        name: '推荐',
      }, {
        name: '视频'
      }, {
        name: '动漫'
      }, {
        name: '科技'
      }, {
        name: '美食'
      }, {
        name: '文化'
      }, {
        name: '游戏'
      }, {
        name: '情感'
      }],
      typeTabIndex: 0,
      notesList: [{
        notesList: [],
        leftList: [],
        rightList: [],
        leftHeight: 0,
        rightHeight: 0,
        status: 'loadmore',
        page: 1,
        pageSize: 10,
      }, {
        notesList: [],
        leftList: [],
        rightList: [],
        leftHeight: 0,
        rightHeight: 0,
        status: 'loadmore',
        page: 1,
        pageSize: 10,
      }, {
        notesList: [],
        leftList: [],
        rightList: [],
        leftHeight: 0,
        rightHeight: 0,
        status: 'loadmore',
        page: 1,
        pageSize: 10,
      }],
      loadingText: '加载中...',
      loadmoreText: '加载更多',
      nomoreText: '没有更多了',
      refreshing: false,
      latitude: 0,
      longitude: 0,
      enablerefresh: true,
    }
  },
  methods: {
    goToSearch() {
      uni.navigateTo({
        url: '/pages/searchPage/searchPage'
      })
    },
    goToUser(id) {
      uni.navigateTo({
        url: '/pages/mine/otherMine?userId=' + id
      })
    },
    getImageHeight(s) {
      return new Promise((resolve, reject) => {
        uni.getImageInfo({
          src: s,
          success: (res) => {
            let imageHeight = pxToRpx(res.height);
            let imageWidth = pxToRpx(res.width);
            const width = 360;
            const maxHeight = 500;
            let height = width * imageHeight / imageWidth;
            if (height > maxHeight) {
              height = maxHeight;
            }
            let obj = {
              height: height,
              path: res.path
            }
            resolve(obj)
          },
        })
      })
    },
    praiseNotes(id, targetUserId, type, index) {
      console.log(type)
      let i = this.actTab;
      praiseOrCancelNotes({
        notesId: id,
        userId: uni.getStorageSync('userInfo').id,
        targetUserId: targetUserId
      }).then(res => {
        console.log(res)
        if (res.code == 20020) {
          if (type === 1) {
            console.log(this.notesList[i].leftList[index])
            if (this.notesList[i].leftList[index].isLike) {
              this.notesList[i].leftList[index].notesLikeNum = this.notesList[i].leftList[index]
                  .notesLikeNum - 1
              this.notesList[i].leftList[index].isLike = false
            } else {
              this.notesList[i].leftList[index].notesLikeNum = this.notesList[i].leftList[index]
                  .notesLikeNum + 1
              this.notesList[i].leftList[index].isLike = true
            }
          } else {
            if (this.notesList[i].rightList[index].isLike) {
              this.notesList[i].rightList[index].notesLikeNum = this.notesList[i].rightList[
                  index].notesLikeNum - 1
              this.notesList[i].rightList[index].isLike = false
            } else {
              this.notesList[i].rightList[index].notesLikeNum = this.notesList[i].rightList[
                  index].notesLikeNum + 1
              this.notesList[i].rightList[index].isLike = true
            }
          }
        }
      })
    },
    praiseUserNotes(id, targetUserId, index) {
      let i = this.actTab;
      praiseOrCancelNotes({
        notesId: id,
        userId: uni.getStorageSync('userInfo').id,
        targetUserId: targetUserId
      }).then(res => {
        console.log(res)
        if (res.code == 20020) {
          if (this.notesList[i].notesList[index].isLike) {
            this.notesList[i].notesList[index].notesLikeNum = this.notesList[i].notesList[index]
                .notesLikeNum - 1
            this.notesList[i].notesList[index].isLike = false
          } else {
            this.notesList[i].notesList[index].notesLikeNum = this.notesList[i].notesList[index]
                .notesLikeNum + 1
            this.notesList[i].notesList[index].isLike = true
          }
        }
      })
    },
    collectNotes(id, targetUserId, index) {
      let i = this.actTab;
      collectOrCancelNotes({
        notesId: id,
        userId: uni.getStorageSync('userInfo').id,
        targetUserId: targetUserId
      }).then(res => {
        console.log(res)
        if (res.code == 20020) {
          if (this.notesList[i].notesList[index].isCollect) {
            this.notesList[i].notesList[index].notesCollectNum = this.notesList[i].notesList[index]
                .notesCollectNum - 1
            this.notesList[i].notesList[index].isCollect = false
          } else {
            this.notesList[i].notesList[index].notesCollectNum = this.notesList[i].notesList[index]
                .notesCollectNum + 1
            this.notesList[i].notesList[index].isCollect = true
          }
        }
      })
    },
    goToDetail(id, type) {
      console.log(type)
      if (type == 0) {
        // 笔记
        uni.navigateTo({
          url: '/pages/notesDetail/notesDetail?notesId=' + id
        })
      } else {
        // 视频
        console.log('视频')
        uni.navigateTo({
          url: '/pages/notesDetail/notesVideoDetail/noteVideoD?notesId=' + id
        })
      }
    },
    animationFinish(e) {
      this.enablerefresh = true;
    },
    transition(e) {
      if (e.target.dx == 0) {
        this.enablerefresh = true;
      } else {
        this.enablerefresh = false;
      }
    },
    getMoreNotes(index) {
      console.log('xxxxxx')
      console.log(index)
      console.log('zzzzzzz')

      // if (this.notesList[index].status == 'nomore' || this.notesList[index].status == 'loading') {
      //   return;
      // }
      // this.notesList[index].status = 'loading';

      let lis = [{
        'createTime': 'createTime',
        'updateTime': 'updateTime',
        'content': 'content',
        'coverPicture': 'https://img.010huwai.com/trip_cover/upload/Trip/2021-11-24/619e003caad97.jpg',
        'avatarUrl': '../../static/image/avatar.png',
        'height': 0,
        'id': 1,
        'notesType': 0,
        'title': '旅游攻略,去哪里玩',
        'belongUserId': 1,
        'views': 666,
        'nickname': '美滋滋'
      }, {
        'createTime': 'createTime',
        'updateTime': 'updateTime',
        'content': 'content',
        'coverPicture': 'https://img.010huwai.com/trip_cover/upload/Trip/2021-11-24/619e003caad97.jpg',
        'avatarUrl': '../../static/image/avatar.png',
        'height': 0,
        'id': 1,
        'notesType': 0,
        'title': '旅游攻略,去哪里玩',
        'belongUserId': 1,
        'views': 666,
        'nickname': '美滋滋'
      }, {
        'createTime': 'createTime',
        'updateTime': 'updateTime',
        'content': 'content',
        'coverPicture': 'https://img.010huwai.com/trip_cover/upload/Trip/2021-11-24/619e003caad97.jpg',
        'avatarUrl': '../../static/image/avatar.png',
        'height': 0,
        'id': 1,
        'notesType': 0,
        'title': '旅游攻略,去哪里玩',
        'belongUserId': 1,
        'views': 666,
        'nickname': '旅游攻略,去哪里玩'
      }, {
        'createTime': 'createTime',
        'updateTime': 'updateTime',
        'content': 'content',
        'coverPicture': 'https://img.010huwai.com/trip_cover/upload/Trip/2021-11-24/619e003caad97.jpg',
        'avatarUrl': '../../static/image/avatar.png',
        'height': 0,
        'id': 1,
        'notesType': 0,
        'title': '旅游攻略,去哪里玩',
        'belongUserId': 1,
        'views': 666,
        'nickname': '美滋滋'
      }, {
        'createTime': 'createTime',
        'updateTime': 'updateTime',
        'content': 'content',
        'coverPicture': 'https://img.010huwai.com/trip_cover/upload/Trip/2021-11-24/619e003caad97.jpg',
        'avatarUrl': '../../static/image/avatar.png',
        'height': 0,
        'id': 1,
        'notesType': 0,
        'title': '旅游攻略,去哪里玩',
        'belongUserId': 1,
        'views': 666,
        'nickname': '美滋滋'
      }];

      this.notesList[index].leftList = lis
      this.notesList[index].leftList.forEach(item => {
        this.getImageHeight(item.coverPicture).then(res => {
          item.coverPicture = res.path

          this.notesList[index].leftList.push(item)
          this.notesList[index].leftHeight += (res.height + pxToRpx(50))
          this.notesList[1].rightList.push(item)
          this.notesList[1].rightHeight += (res.height + pxToRpx(50))

        })
      })

      return;
      if (index == 0) {
        console.log('关注')
        getAttentionUserNotes({
          page: this.notesList[index].page,
          pageSize: this.notesList[index].pageSize,
        }).then(res => {
          if (res.code == 20010) {
            console.log(res)
            this.notesList[index].page += 1;
            res.data.list.forEach(item => {
              item.createTime = weChatTimeFormat(item.createTime)
              item.updateTime = weChatTimeFormat(item.updateTime)
              item.content = '<p>' + item.title + '   ' + item.content.substring(3)
              uni.getImageInfo({
                src: item.coverPicture,
                success: (image) => {
                  item.coverPicture = image.path
                  if (image.width >= image.height) {
                    item.width = 750
                    item.height = 750 * image.height / image.width
                  } else {
                    if (image.height > 800) {
                      item.height = 800
                      item.width = 800 * image.width / image.height
                      if (item.width > 750) {
                        item.width = 750
                        item.height = 750 * image.height / image
                            .width
                      }
                    } else {
                      if (image.width > 750) {
                        item.width = 750
                        item.height = 750 * image.height / image
                            .width
                      } else {
                        item.width = image.width
                        item.height = image.height
                      }
                    }
                  }
                },
                fail: (err) => {
                  console.log(err)
                }
              })
            })
            if (res.data.list.length < this.notesList[index]
                .pageSize) {
              this.notesList[index].status = 'nomore';
            } else {
              this.notesList[index].status = 'loadmore';
            }
            setTimeout(() => {
              this.notesList[index].notesList = this.notesList[index].notesList.concat(
                  res.data.list)
            }, 800)
          } else {
            this.notesList[index].status = 'nomore';
          }
        })
      } else if (index == 1) {
        getLastNotesByPage({
          page: this.notesList[index].page,
          pageSize: this.notesList[index].pageSize,
        }).then(res => {
          if (res.code == 20010) {
            this.notesList[index].page += 1;
            res.data.list.forEach(item => {
              this.getImageHeight(item.coverPicture).then(res => {
                item.coverPicture = res.path
                if (this.notesList[index].leftHeight <= this.notesList[index]
                    .rightHeight) {
                  this.notesList[index].leftList.push(item)
                  this.notesList[index].leftHeight += (res.height + pxToRpx(
                      50))
                } else {
                  this.notesList[index].rightList.push(item)
                  this.notesList[index].rightHeight += (res.height + pxToRpx(
                      50))
                }
              })
            })
            if (res.data.list.length < this.notesList[index]
                .pageSize) {
              this.notesList[index].status = 'nomore';
            } else {
              this.notesList[index].status = 'loadmore';
            }
          } else {
            this.notesList[index].status = 'nomore';
          }
        })
      } else if (index == 2) {
        let pageParam = {
          page: this.notesList[index].page,
          pageSize: this.notesList[index].pageSize,
          latitude: this.latitude,
          longitude: this.longitude
        };
        searchNotesNearby({
          pageParam
        }).then(res => {
          console.log(res)
          if (res.code == 20010) {
            this.notesList[index].page += 1;
            if (res.data.list.length < this.notesList[index]
                .pageSize) {
              this.notesList[index].status = 'nomore';
            } else {
              this.notesList[index].status = 'loadmore';
            }
            res.data.list.forEach(item => {
              this.getImageHeight(item.coverPicture).then(res => {
                item.coverPicture = res.path
                if (this.notesList[index].leftHeight <= this.notesList[index]
                    .rightHeight) {
                  this.notesList[index].leftList.push(item)
                  this.notesList[index].leftHeight += (res.height + pxToRpx(
                      50))
                } else {
                  this.notesList[index].rightList.push(item)
                  this.notesList[index].rightHeight += (res.height + pxToRpx(
                      50))
                }
              })
            })
          } else {
            this.notesList[index].status = 'nomore';
            unin.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1000
            })
          }
        })
      }
    },
    refreshList(index) {
      if (this.notesList[index].status == 'nomore' || this.notesList[index].status == 'loading') {
        return;
      }
      this.notesList[index].status = 'loading';
      if (index == 0) {
        getAttentionUserNotes({
          page: 1,
          pageSize: this.notesList[index].pageSize,
        }).then(res => {
          if (res.code == 20010) {
            console.log(res)
            res.data.list.forEach(item => {
              item.createTime = weChatTimeFormat(item.createTime)
              item.updateTime = weChatTimeFormat(item.updateTime)
              item.content = '<p>' + item.title + '   ' + item.content.substring(3)
              uni.getImageInfo({
                src: item.coverPicture,
                success: (image) => {
                  item.coverPicture = image.path
                  if (image.width >= image.height) {
                    item.width = 750
                    item.height = 750 * image.height / image.width
                  } else {
                    if (image.height > 800) {
                      item.height = 800
                      item.width = 800 * image.width / image.height
                      if (item.width > 750) {
                        item.width = 750
                        item.height = 750 * image.height / image
                            .width
                      }
                    } else {
                      if (image.width > 750) {
                        item.width = 750
                        item.height = 750 * image.height / image
                            .width
                      } else {
                        item.width = image.width
                        item.height = image.height
                      }
                    }
                  }
                },
                fail: (err) => {
                  console.log(err)
                }
              })
            })
            setTimeout(() => {
              console.log(res.data)
              this.notesList[index].notesList = res.data.list;
              this.notesList[index].page = 2;
            }, 800)
            if (res.data.list.length < this.notesList[index]
                .pageSize) {
              this.notesList[index].status = 'nomore';
            } else {
              this.notesList[index].status = 'loadmore';
            }
          } else {
            this.notesList[index].status = 'nomore';
          }
        })
      } else if (index == 1) {
        getLastNotesByPage({
          page: 1,
          pageSize: this.notesList[index].pageSize,
        }).then(res => {
          if (res.code == 20010) {
            this.notesList[index].leftHeight = 0;
            this.notesList[index].rightHeight = 0;
            this.notesList[index].leftList = [];
            this.notesList[index].rightList = [];
            this.notesList[index].page = 2;
            res.data.list.forEach(item => {
              this.getImageHeight(item.coverPicture).then(res => {
                item.coverPicture = res.path
                if (this.notesList[index].leftHeight <= this.notesList[index]
                    .rightHeight) {
                  this.notesList[index].leftList.push(item)
                  this.notesList[index].leftHeight += (res.height + pxToRpx(
                      50))
                } else {
                  this.notesList[index].rightList.push(item)
                  this.notesList[index].rightHeight += (res.height + pxToRpx(
                      50))
                }
              })
            })
            if (res.data.list.length < this.notesList[index]
                .pageSize) {
              this.notesList[index].status = 'nomore';
            } else {
              this.notesList[index].status = 'loadmore';
            }
          } else {
            this.notesList[index].status = 'nomore';
          }
        })
      } else if (index == 2) {
        let pageParam = {
          page: 1,
          pageSize: this.notesList[index].pageSize,
          latitude: this.latitude,
          longitude: this.longitude
        };
        searchNotesNearby({
          pageParam
        }).then(res => {
          if (res.code == 20010) {
            this.notesList[index].leftHeight = 0;
            this.notesList[index].rightHeight = 0;
            this.notesList[index].leftList = [];
            this.notesList[index].rightList = [];
            this.notesList[index].page = 2;
            res.data.list.forEach(item => {
              this.getImageHeight(item.coverPicture).then(res => {
                item.coverPicture = res.path
                if (this.notesList[index].leftHeight <= this.notesList[index]
                    .rightHeight) {
                  this.notesList[index].leftList.push(item)
                  this.notesList[index].leftHeight += (res.height + pxToRpx(
                      50))
                } else {
                  this.notesList[index].rightList.push(item)
                  this.notesList[index].rightHeight += (res.height + pxToRpx(
                      50))
                }
              })
            })
            if (res.data.list.length < this.notesList[index]
                .pageSize) {
              this.notesList[index].status = 'nomore';
            } else {
              this.notesList[index].status = 'loadmore';
            }
          } else {
            this.notesList[index].status = 'nomore';
            unin.showToast({
              title: res.msg,
              icon: 'none',
              duration: 1000
            })
          }
        })
      }
    },
    changetabs(e) {
      let index = e.index;
      if (this.actTab != index) {
        this.actTab = index;
        return;
      }
      this.actTab = index;
      if (this.latitude == 0 || this.longitude == 0) {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            this.notesList[index].status = 'loadmore';
            this.notesList[index].page = 1;
            this.refreshList(index);
          },
          fail: (err) => {
            console.log(err);
            uni.showToast({
              title: '获取位置失败',
              icon: 'none'
            })
          }
        })
      } else {
        this.notesList[index].status = 'loadmore';
        this.notesList[index].page = 1;
        this.refreshList(index);
      }
    },
    onRefresh() {
      console.log('onRefresh')
      if (this.refreshing) {
        return;
      }
      this.refreshing = true;
      let index = this.actTab;
      this.notesList[index].status = 'loadmore';
      this.notesList[index].page = 1;
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.refreshList(index);
          setTimeout(() => {
            this.refreshing = false;
          }, 700);
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          })
        }
      })
    },
    swipeIndex(e) {
      let index = e.detail.current;
      this.actTab = index;
      if (this.latitude == 0 || this.longitude == 0) {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            if (this.notesList[index].leftList.length == 0) {
              this.refreshList(index);
            }
          },
          fail: (err) => {
            console.log(err);
            uni.showToast({
              title: '获取位置失败',
              icon: 'none'
            })
          }
        })
      } else {
        if (this.notesList[index].leftList.length == 0) {
          this.refreshList(index);
        }
      }
    },
    typeTabChange(e) {
      this.typeTabIndex = e.detail.current;
    },
    changeType(e) {
      this.typeTabIndex = e.index;
    },
    onReach() {
      console.log('onReach');
      this.getMoreNotes(this.actTab);
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.statusBarHeight = res.statusBarHeight;
        this.notesHeight = res.windowHeight - this.statusBarHeight - 40;
        console.log(this.statusBarHeight);
      }
    })
    this.getMoreNotes(this.actTab);
  },
  onPullDownRefresh() {
    console.log('onPullDownRefresh');
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 700);
  }
}
</script>

<style lang="scss" scoped>
.water-left,
.water-right {
  width: 48%;
  margin: 20rpx auto;
  u-image {
    overflow: hidden;
    border-radius: 50%;
  }
}

.title {
  font-size: 30rpx;
  padding: 10rpx;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4em;
  max-height: 2.4em;
}

.note-username {
  margin-left: 10rpx;
  color: #16160e;
  font-size: 23rpx;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 70px);
}

.look-views {
  display: flex;
  position: absolute;
  bottom: 20rpx;
  left: 8rpx;
  color: #ffffff;
  background-color: rgba(123, 124, 125, 0.6);
  // filter: brightness(65%);
  padding: 5rpx 10rpx;
  border-radius: 50rpx;
  font-size: 25rpx;
}

.video-play {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: rgba(123, 124, 125, 0.6);
  // filter: brightness(65%);
  padding: 10rpx;
  border-radius: 50%;
}
</style>
